<template>
  <div class="container">
    <div class="left-section">
      <div>
        <a-tabs
            v-model:activeKey="activeKey"
            :tab-position="mode"
            :style="{ height: '50px',width:'900px'}"
            @change="changeType"
        >
          <a-tab-pane  v-for="type in types" :key="type.code" :tab="`${type.name}`"></a-tab-pane>
        </a-tabs>
        <div style="display: flex;flex-direction: row">
          类型：<a-tag  @close="removeSelectedType(selected.name)" v-for="selected in selectedType">{{selected.name}}</a-tag>
          题目：<a-input-search
            v-model:value="title"
            placeholder="input search text"
            style="width: 200px"
            @search="queryDataByCondition({pageSize:10,pageNo:1})"
        />
        </div>
      </div>
      <div style="text-align: right">
        <a-button type="primary" @click="getQuestionInfo(null)">
          新增
        </a-button>
      </div>
      <a-table
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="handleTableChange"
      >
        <template #bodyCell="{ column, text ,index}">
          <template v-if="column.dataIndex === 'title'">
            {{ text }}
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="link" @click="editQuestion(index)">编辑</a-button>
            <a-button type="link" danger @click="deleteQuestion(index)">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>

  </div>
</template>
<script>
import { usePagination } from 'vue-request';
import {computed, defineComponent, onMounted, reactive, ref} from 'vue';
import axios from 'axios';
import {isReturnTrue} from "@/util/util";
import router from "@/router";


export default defineComponent({
  setup() {
    const changeType = val => {
      if(selectedType.value.length>0){
        for(let i = 0; i < selectedType.value.length; i++){
          if(selectedType.value[i].code===val){
            selectedType.value.splice(i,1)
            return;
          }
        }
      }
      for (let e of types.value) {
        if(e.code===val){
          console.log(e.name)
          selectedType.value.push({
            code:e.code,
            name:e.name,
            id:e.id
          })
        }
      }
      console.log(selectedType.value);
    };
    const getAllTypes=()=>{
      axios.get("/core/t-question-type/all").then((response)=>{
        if(isReturnTrue(response.data.code)){
          types.value=response.data.data
        }
        else{
          alert(response.data.message)
        }
      })
    }
    const removeSelectedType=(name)=>{
      let index=0;
      const r=ref([]);
      for (let i = 0; i < selectedType.value.length; i++) {
        if(name!=selectedType.value[i].name){
          // selectedType.value.splice(i,1)
          // index=i;
          r.value.push(selectedType.value[i])
          console.log(i)
        }
      }
      selectedType=r
      // for (let i = 0; i < selectedType.length; i++) {
      //
      // }
      console.log(selectedType.value)
    }
    let selectedType=ref([])
    const mode = ref('top');
    const types=ref([{
      name:'',
      code:''
    }])
    const columns = [{
      title: '题目',
      dataIndex: 'title',
      sorter: true,
      width: 'auto',
    }, {
      title: '题解',
      dataIndex: 'solutionNum',
      width: '20%',
    }, {
      title: '通过率',
      dataIndex: 'acRate',
      width: '20%'
    },
      {
        title: '难度',
        dataIndex: 'difficulty',
        width: '20%'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: '25%'
      }
    ];
    const queryData = params => {
      let _datasource=dataSource
      params.types=selectedType.value.length==0?null:selectedType.value.map(item=>item.id)
      params.title=title.value==''?null:title.value
      axios.post("/core/t-question/page",
          params,
      ).then((response)=>{
        if(isReturnTrue(response.data.code)){
          console.log("分页成功");
          _datasource.value=response.data.data.records;
          pagination.value.pageSize=response.data.data.size;
          pagination.value.current=response.data.data.current;
          pagination.value.total=response.data.data.total
          return response.data.records;
        }
        else{
          alert(response.data.message);
        }
      });
    };
    // const {
    //   data: dataSource,
    //   run,
    //   loading,
    //   current,
    //   pageSize,
    // } = usePagination(queryData, {
    //     currentKey: 'pageNo',
    //     pageSizeKey: 'pageSize',
    //   },
    // );
    const dataSource=ref([{
      title:'',
      solutionNum:'',
      difficulty:'',
      acRate:'',
      payOnly:'',
      titleSlug:'',
    }])
    // const dataSource=[{
    //   title:'',
    //   solutionNum:'',
    //   difficulty:'',
    //   acRate:'',
    //   payOnly:''
    // }]
    const pagination = ref({
      total: 10,
      current: 1,
      pageSize: 10,
    });
    const handleTableChange = (pag, filters, sorter) => {
      queryData({
        pageSize:pag.pageSize,
        pageNo:pag.current
      })
      console.log("页切换")
    };
    const activeKey = ref(1);
    const callback = val => {
      console.log(val);
    };
    const getQuestionInfo=(index)=>{
      console.log("点击题目跳转")
      console.log(index)
      if(index!=null)
      {
        router.push('/manager/questionInfo/'+dataSource.value[index].titleSlug);
      }
      else{
        router.push('/manager/questionInfo/edit');
      }
    };
    const editQuestion=(index)=>{
      getQuestionInfo(index)
    };
    const deleteQuestion=(index)=>{
      axios.delete("/core/t-question/"+dataSource.value[index].titleSlug).then((response)=>{
        if(isReturnTrue(response.data.code)){
          alert("删除成功");
          queryData({
            pageSize:10,
            pageNo:1
          });
        }
        else{
          alert(response.data.message);
        }
      })
    };
    const queryDataByCondition=(params)=>{
      queryData(params)
    }
    onMounted(()=>{
      queryData({
        pageSize:10,
        pageNo:1
      })
      getAllTypes()
    });
    const title = ref();

    return {
      queryDataByCondition,
      callback,
      getAllTypes,
      activeKey,
      dataSource,
      pagination,
      // loading,
      columns,
      handleTableChange,
      queryData,
      getQuestionInfo,
      editQuestion,
      deleteQuestion,
      removeSelectedType,
      mode,
      types,
      selectedType,
      changeType,
      title


    };
  },
});
</script>
<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: absolute;
  left: 15%;
  top: 3%;
}
.left-section {
  flex: 1;
  flex-basis: 50%;
  padding: 20px;
}
.right-section{
  position: absolute;
  top: 100px;
  flex: 0 0 300px;
  left: 100%;
}
.elevated-box {
  position: sticky;
  top: 0;
  width: 300px;
  height: 500px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}
</style>